<template>
	<view class="content">
		<view class="headertop" :style="{'background':flag1?'#000':''}">
			<view class="box"
				:style="{'margin-top':statusBarHeight+'px','width':'100%','height':barHeight+'px','display':'flex','align-items': 'center'}">
				<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 2@2x.png" class="pagelefticon"
					mode=""></image>
			</view>
		</view>

		<view class="loop">
			<up-swiper height="486" :list="list5" @change="e => current = e.current" @click="clickloop"
				:autoplay="false">
				<template #indicator>
					<view class="indicator">
						<view class="indicator__dot" v-for="(item, index) in list5" :key="index"
							:class="[index === current && 'indicator__dot--active']">
						</view>
					</view>
				</template>
			</up-swiper>
			<view class="mcen">

			</view>
		</view>


		<view class="bottombox">
			<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11491@2x.png" class="bottomboximg"
				mode=""></image>
			<view class="xuanxiangbox">
				<view class="xuanxiangbox_box" @click="gopage('营位')">
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11408@2x.png" mode=""
						class="xuanxiangbox_box_backimg"></image>
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11409@2x.png" class="boximg"
						mode=""></image>
					<view class="tuijianbtn">
						推荐营位
					</view>
					<view class="text">
						轻松开启户外之旅
					</view>
				</view>
				<view class="xuanxiangbox_box" @click="gopage('商品')">
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11408@2x.png" mode=""
						class="xuanxiangbox_box_backimg"></image>
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11410@2x.png" class="boximg"
						mode=""></image>
					<view class="tuijianbtn">
						推荐商品
					</view>
					<view class="text">
						精选露营好物
					</view>
				</view>
			</view>
			<view class="tzggline" v-if="homeobj.notice">
				<view class="leftbox" @click="gopage('通知公告详情',homeobj.notice.id)">
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11412@2x.png"
						class="leftbox_backimg" mode="">
					</image>
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/image 75@2x.png" mode=""
						class="ggicon"></image>
					<view class="texts">
						<view class="t1">
							{{homeobj.notice.title}}
						</view>
						<view class="t2">
							{{homeobj.notice.detail}}
						</view>
					</view>
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(9).png" class="rightarrow"
						mode=""></image>
				</view>
				<view class="xiaoxireduce" @click="gopage('通知公告')">
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Rectangle 24509@2x.png" mode=""
						class="xiaoxireduce_back"></image>
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(10).png" class="centericon"
						mode=""></image>
					<view class="reduce" v-if="homeobj.notice.new==1">

					</view>
				</view>
				<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/download 73@2x.png" class="rightimg"
					mode=""></image>
			</view>

			<view class="yindijishao">
				<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11483@2x(1).png"
					class="yindijishao_title" @click="gopage('热门营地')" mode="">
				</image>
				<view class="zp1" @click="gopage('营地详情',homeobj.camp[0]['id'])"
					:style="{'margin-left':!flag?'-300rpx':'0rpx'}">
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/image@2x.png" class="zq1img"
						mode=""></image>
					<view class="sdlky">
						<view class="title">
							{{homeobj.camp[0]['title']}}
						</view>
						<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11489@2x.png"
							class="sdlkyback" mode="">
						</image>
					</view>
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/image 78@2x.png" class="arrow"
						mode="aspectFill">
					</image>
				</view>
				<view class="zq2" @click="gopage('营地详情',homeobj.camp[1]['id'])"
					:style="{'margin-right':!flag?'-300rpx':'0rpx'}">
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11415@2x.png" class="zq2img"
						mode=""></image>
					<view class="sdlky">
						<view class="title">
							{{homeobj.camp[1]['title']}}
						</view>
						<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11484@2x.png"
							class="sdlkyback" mode="">
						</image>
					</view>
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/image 77@2x.png" class="arrow"
						mode="aspectFill">
					</image>
				</view>
				<view class="zq3" @click="gopage('营地详情',homeobj.camp[2]['id'])"
					:style="{'margin-left':!flag?'-300rpx':'0rpx'}">
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/image 23@2x.png" class="zq3img"
						mode=""></image>
					<view class="sdlky">
						<view class="title">
							{{homeobj.camp[2]['title']}}
						</view>
						<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11490@2x.png"
							class="sdlkyback" mode="">
						</image>
					</view>
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/image 79@2x.png" class="arrow"
						mode="aspectFill">
					</image>
				</view>
				<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11416@2x.png" class="dogimg"
					mode=""></image>
				<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11417@2x.png" class="xwsh"
					mode=""></image>
				<view class="addressbox">
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11418@2x.png"
						class="addressbox_backimg" mode="">
					</image>
					<view class="centerinfo">
						<view class="text" v-if="yingdiobj.campdetail.length>50">
							{{yingdiobj.campdetail.slice(0,50)}}<span style="color: #347C2E;" @click="open">...展开
								<image src="/static/Frame@2x(24).png"
									style="width: 24rpx;height: 24rpx;display: inline-block;" mode="" />
							</span>
							<!-- <view style="display: inline-block;text-align: left;"><span
									style="display: flex;align-items: center;color: #347C2E;">...展开
									<image src="/static/Frame@2x(24).png" style="width: 24rpx;height: 24rpx;" mode="" />
								</span>
							</view> -->
						</view>
						<view class="text" v-else>
							{{yingdiobj.campdetail}}
						</view>
						<view class="phonebox">
							<view class="texs">
								联系电话：{{yingdiobj.camp_telphone}}
							</view>
							<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11419@2x.png"
								@click="makeCall(yingdiobj.camp_telphone)" class="righticon" mode="">
							</image>
						</view>
						<view class="phonebox1" @click="daohang">
							<view class="texs">
								营地地址：{{yingdiobj.camp_address}}
							</view>
							<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11420@2x.png"
								class="righticon" mode="">
							</image>
						</view>
					</view>
				</view>
			</view>
			<view class="yingdiactiuve">
				<view class="topbiaoti" @click="gopage('营地活动')">
					<view class="leftflow1">
						<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/download 27@2x.png"
							class="leftflow" mode="">
						</image>
					</view>
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11486@2x.png"
						class="yindititle" mode=""></image>
					<view class="rightflow1">
						<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/download 76@2x.png"
							class="rightflow" mode="">
						</image>
					</view>
				</view>
				<view class="cnshu">
					<view class="swiper">
						<swiper style="height:252px;" class="swiper-tall" :indicator-dots="indicatorDots"
							:autoplay="autoplay" :previous-margin="previousMargin" :next-margin="nextMargin"
							:circular="circular" @change="change" :current="swiperCurrentIndex">
							<swiper-item class="swiper-container" v-for="(i,index) in list3"
								@click="gopage('营地活动详情',i.id)" :key="index" :item-id="index" :data-year="index">
								<view class="swiper-item" :animation="animationData[index]">
									<image :src="i.image" mode=""></image>
									<view class="shopname">
										<view class="shopname1">{{i.title}}</view>
										<view class="shopname2">{{i.detail}}</view>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>

			</view>
			<view class="haowutuijian">
				<view class="topbiaoti" @click="gopage('商品')">
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11421@2x.png"
						class="leftflow1" mode=""></image>
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11488@2x.png"
						class="yindititle" mode=""></image>
				</view>
				<view class="centerboxs">
					<view class="itembox" v-for="item in shanglist" :key="item.id" @click="gopage('商品详情',item.id)">
						<image :src="item.image" mode=""></image>
						<view class="texts">
							<view class="t1">
								{{item.title}}
							</view>
							<view class="jige">
								￥{{item.price}} <span style="color:#4E5969 ;font-size: 24rpx;">/份</span>
							</view>
							<view class="botomline">
								<span>剩余：{{item.stock}}份</span>
								<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11214@2x.png"
									class="addicon" @click.stop="addcarfun('+',item)" mode="" v-if="!item.num">
								</image>
								<view class="gbnum" v-if="item.num">
									<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11215@2x.png"
										mode="" @click.stop="addcarfun('-',item)" class="icon"></image>
									<view class="num">
										{{item.num}}
									</view>
									<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11214@2x.png"
										mode="" @click.stop="addcarfun('+',item)" class="icon"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" style="height: 180rpx;">

			</view>
			<up-popup :show="show" mode="center">
				<view class="popucenter1">
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/微信图片_20250429115018.png"
						class="popucenter1_close" @click="show=false" mode="" />
					<view class="" style="width: 600rpx;margin: auto;height: 500rpx;margin-top: 70rpx;">
						<up-parse :content="yingdiobj.camp_fileall"></up-parse>
					</view>
				</view>
			</up-popup>
		</view>
		<Tabbar :page="page"></Tabbar>
		<userlogin ref="denglu"></userlogin>
	</view>
</template>

<script setup>
	import userlogin from '@/components/getuser/getuser.vue'
	import Tabbar from '@/components/tabbar.vue'
	import {
		bannerlist,
		campfile,
		activitylist,
		goodslist
	} from "@/api/home.js"
	import {
		addcart,
		cartlist
	} from '@/api/commodity.js'
	import {
		onShow,
		onLoad,
		onPageScroll
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	const current = ref(0)
	const denglu = ref(null)
	const page = ref('')
	const flag = ref(false)
	const yingdiobj = ref({})
	const flag1 = ref(false)
	const indicatorDots = ref(false)
	const autoplay = ref(false)
	const show = ref(false)
	const previousMargin = uni.upx2px(120) + 'px'
	const nextMargin = uni.upx2px(120) + 'px'
	const circular = ref(true)
	const shanglist = ref([])
	const animationData = ref({
		0: {},
		1: {},
		2: {},
		3: {},
		4: {},
		5: {},
		6: {},
		7: {},
	})
	const zoomParam = ref(1.10)
	const swiperCurrentIndex = ref(0)
	const statusBarHeight = ref(0)
	const barHeight = ref('')
	const homeobj = ref({})
	onPageScroll((e) => {
		if (e.scrollTop > 300) {
			flag.value = true
		}
		if (e.scrollTop > 100) {
			flag1.value = true
		} else {
			flag1.value = false
		}
	})

	onMounted(() => {
		console.log('我创建了', uni.getSystemInfoSync().statusBarHeight, wx.getMenuButtonBoundingClientRect());
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
		setTimeout(() => {
			if (uni.getStorageSync('token')) {
				console.log(1231231);
				denglu.value.getuserinfo()
			}
		}, 2000); // 延迟2秒
	})
	const animation = ref('')
	onLoad(() => {

		animation.value = uni.createAnimation();
		animation.value.scale(zoomParam.value).step();
		animationData.value[0] = animation.value.export();
		init()
		yindejieshao()
		activitylistinit()
		shangpinglistinit()

	})
	onShow(() => {
		shangpinglistinit()
	})
	async function initgouwunum() {
		const res = await cartlist()
		if (res.data.code == 1) {

			for (var i in shanglist.value) {
				var ind = res.data.data.list.findIndex(item => item.gid == shanglist.value[i]['id'])
				if (ind == -1) {
					shanglist.value[i]['num'] = 0
				} else {
					shanglist.value[i]['num'] = res.data.data.list[ind]['num']
				}
			}
			var arr1 = res.data.data.list
			var jiage = arr1.reduce((e, item) => {
				return e + item.num
			}, 0)
		}
	}
	async function addcarfun(type, item) {
		if (!uni.getStorageSync('token')) {
			denglu.value.DengLu()
			return
		}
		var adtype1 = 1
		if (type == '+') {
			adtype1 = 1
		} else {
			adtype1 = 2
		}
		const res = await addcart({
			gid: item.id,
			num: 1,
			adtype: adtype1
		})
		if (res.code == 0) {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
		if (res.data.code == 1) {
			initgouwunum()
		} else {
			uni.showToast({
				title: res.data.msg,
				icon: 'none'
			})
		}
	}

	function open() {
		show.value = true
	}

	function daohang() {
		wx.openLocation({
			latitude: yingdiobj.value.yd_lat * 1, //纬度
			longitude: yingdiobj.value.lng * 1, //经度
			address: yingdiobj.value.camp_address
		});
	}

	function clickloop(e) {
		console.log(e, homeobj.value, 'eeeeeeeeeeeeeeeeee');
		// 1=营地,2=租赁,3=商城
		if (homeobj.value['banner'][e]['type'] == 1) {
			uni.navigateTo({
				url: '/sub_Campposition/Campposition/yingdidetail1?id=' + homeobj.value['banner'][e]['typeid']
			})
		} else if (homeobj.value['banner'][e]['type'] == 2) {
			if (!uni.getStorageSync('token')) {
				denglu.value.DengLu()
				return
			}
			uni.navigateTo({
				url: '/sub_lease/lease/detail?id=' + homeobj.value['banner'][e]['typeid']
			})

		} else if (homeobj.value['banner'][e]['type'] == 3) {
			if (!uni.getStorageSync('token')) {
				denglu.value.DengLu()
				return
			}
			uni.navigateTo({
				url: '/sub_commodity/commodity/detail?id=' + homeobj.value['banner'][e]['typeid']
			})

		}
	}
	//营地介绍
	async function yindejieshao() {
		const res = await campfile()
		if (res.data.code == 1) {
			yingdiobj.value = res.data.data
		}
	}
	// 商品列表
	async function shangpinglistinit() {
		const res = await goodslist({
			page: 1,
			limit: 6
		})
		if (res.data.code == 1) {
			shanglist.value = res.data.data.list
			if (uni.getStorageSync('token')) {
				initgouwunum()
			}
		}
	}
	// 营地活动
	async function activitylistinit() {
		const res = await activitylist({
			page: 1,
			limit: 10
		})
		if (res.data.code == 1) {
			list3.value = res.data.data.list

		}
	}
	async function init() {
		const res = await bannerlist()
		if (res.data.code == 1) {
			console.log(res.data.data, 'res---------------------');
			homeobj.value = res.data.data
			list5.value = res.data.data.banner.map(item => item.image)
		}
	}

	function change(e) {
		swiperCurrentIndex.value = e.detail.current;
		for (let key in animationData.value) {
			if (e.detail.currentItemId == key) {
				animation.value.scale(zoomParam.value).step();
				animationData.value[key] = animation.value.export();
			} else {
				animation.value.scale(1.0).step();
				animationData.value[key] = animation.value.export();
			}
		}
	}
	onShow(() => {
		page.value = '/pages/index/index'

	})

	const list5 = ref([
		'https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11407@2x.png',
		'https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11407@2x.png',
		'https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11407@2x.png',
	]);
	const list3 = ref([
		'https://39gongli.oss-cn-beijing.aliyuncs.com/static/image@2x(5).png',
		'https://39gongli.oss-cn-beijing.aliyuncs.com/static/image@2x(5).png',
		'https://39gongli.oss-cn-beijing.aliyuncs.com/static/image@2x(5).png'
	]);

	function makeCall(phone) {
		console.log(123);
		uni.showActionSheet({
			// this.content.serviceTel
			itemList: [phone], //itemList字段不变
			success: function(res) {
				if (res.tapIndex !== undefined) {
					uni.makePhoneCall({
						phoneNumber: phone,
						success: function() {
							console.log('拨打电话成功');
						},
						fail: function() {
							console.log('拨打电话失败');
						}
					});
				}
			}.bind(this) // 绑定this作用域
		});
	}

	function gopage(str, id) {
		if (str == '营位') {
			uni.switchTab({
				url: '/pages/Campposition/index'
			})
		} else if (str == '商品') {
			uni.switchTab({
				url: '/pages/commodity/index'
			})

		} else if (str == '热门营地') {
			uni.navigateTo({
				url: '/sub_index/index/hotyingdi'
			})

		} else if (str == '营地活动') {
			uni.navigateTo({
				url: '/sub_index/index/yingdiactive'
			})
		} else if (str == '营地详情') {
			var query = {
				datetime: '',
			}
			const now = new Date()
			var month = (now.getMonth() + 1) > 10 ? now.getMonth() + 1 : '0' + (now.getMonth() + 1)
			var ri = now.getDate() > 10 ? now.getDate() : '0' + now.getDate()
			query.datetime = now.getFullYear() + '-' + month + '-' + ri
			uni.setStorageSync('yuyuesoninfo', query)
			uni.navigateTo({
				url: '/sub_Campposition/Campposition/yingdidetail1?typestr=AppointmentService&id=' + id
			})
		} else if (str == '通知公告') {
			uni.navigateTo({
				url: '/sub_index/index/tzgg'
			})
		} else if (str == '通知公告详情') {
			uni.navigateTo({
				url: '/sub_index/index/activedetail?id=' + id + '&title=详情'
			})
		} else if (str == '营地活动详情') {
			uni.navigateTo({
				url: '/sub_index/index/activedetail?id=' + id
			})
		} else if (str == '商品详情') {
			uni.navigateTo({
				url: '/sub_commodity/commodity/detail?id=' + id
			})
		}

	}
</script>
<style lang="scss">
	::v-deep .u-popup__content {
		background-color: rgba(255, 0, 0, 0) !important;
	}

	.popucenter1 {
		width: 636rpx;
		overflow: hidden;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		background: linear-gradient(180deg, #F4FFF5 0%, #FFFFFF 31%);
		position: relative;
		height: 600rpx;


		&_close {
			right: 0%;
			top: 0%;
			position: absolute;
			width: 42rpx;
			height: 42rpx;
			margin-top: 20rpx;
			margin-right: 26rpx;
		}
	}

	.gbnum {
		display: flex;
		align-items: center;
		width: 120rpx;
		justify-content: space-between;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #4E5969;
		z-index: 999;

		.icon {
			width: 40rpx !important;
			height: 40rpx !important;
			margin-left: 0rpx !important;
			border-radius: 0rpx !important;
		}

	}

	@import '/styles/index.scss';
</style>